import Vue from 'Vue'

const app = function () {

    var bus = new Vue()

    Vue.component('component-a', {
        template:`<input type="text" v-model="message" @input="emitEvent"/>`,
        data(){
            return {message:''}
        },
        methods:{
            emitEvent(){
                bus.$emit('message',this.message)
            }
        },
        created(){
            var _this = this
            bus.$on('message', c_msg => {
                _this.message = c_msg
            })
        }
    })

    Vue.component('component-b', {
        template:`<input type="text" v-model="message" @input="emitEvent"/>`,
        data(){
            return {message:''}
        },
        methods:{
            emitEvent(){
                bus.$emit('message',this.message)
            }
        },
        created(){
            var _this = this
            bus.$on('message', c_msg => {
                _this.message = c_msg
            })
        }
        
    })

    new Vue({
        data:{
            message:''
        },
        methods:{
            emitEvent(){
                bus.$emit('message',this.message)
            }
        },
        created(){
            var _this = this
            bus.$on('message', c_msg => {
                _this.message = c_msg
            })
        }
    }).$mount('#app-1')


    new Vue({
        el:'#app-2',
        data:{
            message:''
        },
        methods:{
            handle(){
                this.$refs.child.message = this.message
            }
        },
        components:{
            'component-21':{
                template:'<input type="text" v-model="message" @input="handle"/>',
                data(){
                    return {message:''}
                },
                methods:{
                    handle(){
                        this.$parent.message = this.message 
                    }
                }
            }
        },
        
    })

}

export { app }